<script setup>
import { ref, reactive, onMounted } from 'vue'
import TodoItem from './Test-3-TodoItem.vue'

const newTodoText = ref('')
let todosIndex = 4
const todos = reactive([
    {
        id: 1,
        title: 'todos 1'
    },
    {
        id: 2,
        title: 'todos 2'
    },
    {
        id: 3,
        title: 'todos 3'
    },
])
function addNode() {
    todos.push({
        id: todosIndex++,
        title: newTodoText.value
    }),
    newTodoText.value = ''
}

const list = ref([1,2,3])
const itemRefs = ref([])

onMounted(() => {
    console.log("In Test-3.vue: " + itemRefs.value.map(i => i.textContent))
})

</script>

<template>
    <form @submit.prevent="addNode">
        <label>Add a todo: </label>
        <input v-model="newTodoText" placeholder="E.g. Feed the cat"/>
        <button type="submit">add</button>
    </form>
    <ul>
        <todo-item v-for="(todo, index) in todos"
         :key="todo.id"
         :title="todo.title"
         @remove="todos.splice(index, 1)">
        </todo-item> 
    </ul>
    <ul>
        <li v-for="(item,index) in list" ref="itemRefs" :key="index">
            {{ item }}
        </li>
    </ul>
</template>
